<template>
  <transition name="el-zoom-in-top">
    <div v-show="isShowUsefulWord" class="useful-word">
        <div  class="transition-box">
          <div class="edit-btn" @click="isEdit">{{ editState ? '完成':'编辑'}}</div>
          <div class="useful-word-title">常用语</div>
          <div class="list" v-loading="loading">
            <div class="item" v-for="(item,index) in usefulWordList" :key="item.wordsId">
              <p @click="selectUseFulWord(item)" :title="item.content" v-if="!editState">{{item.content}}</p>
              <el-input
                v-else
                size="mini"
                placeholder="请输入"
                v-model.trim="item.content"
                maxlength="200"
                class="input"
                clearable
              ></el-input>
            </div>
          </div>
        </div>
    </div>
  </transition>
</template>

<script>
import {
  getProcessCommonWords,
  updateUsefulWords
} from "@/api/modules/eventManagement/eventDialog/usefulWord";
export default {
  name: "usefulWord",
  data(){
    return {
      editState:false, /** false 编辑 true 完成*/
      usefulWordList:[],
      loading:false,
      oldUsefulWordList:[], // 修改前数据
    }
  },
  props:{
    isShowUsefulWord:{
      type:Boolean,
      default:false
    },
    desc:{
      type:String,
      default:''
    }
  },
  watch:{
    isShowUsefulWord:{
      async handler(val){
        if(!val) {
          this.editState = false;
        }else {
          await this.getList();
        }
      }
    }
  },
  methods:{
    isEdit(){
      this.editState = !this.editState;
      if(!this.editState) {
        updateUsefulWords(this.usefulWordList,this.oldUsefulWordList,this);
      }
    },
    selectUseFulWord(item){
      this.$emit('update:isShowUsefulWord',false)
      this.$emit('update:desc',item.content);
    },
    /**
     * 获取常用语列表
     */
    async getList(){
      const res = await getProcessCommonWords();
      if(res.code == 200) {
        this.usefulWordList = JSON.parse(JSON.stringify(res.data));
        this.oldUsefulWordList = JSON.parse(JSON.stringify(res.data));
      }
    }
  },
  async mounted() {

  }
}
</script>

<style lang="scss" scoped>
.useful-word {
  background: #F5F7FA;
  width: 100%;
  padding: 18px;
  min-height: 200px;
  position: relative;
  border-radius: 2px;
  border: 1px solid #DCDFE6;
  margin-top: 1px;
  .edit-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #0084FF;
    font-family: PingFangSC-Regular, PingFang SC;
    font-width: 400;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .useful-word-title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0,0,0,0.85);
    text-align: center;
    line-height: 1;
  }
  .list {
    .item {
      height: 28px;
      background: #FFFFFF;
      border-radius: 3px;
      // border: 1px solid #DCDFE6;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.65);
      line-height: 28px;
      margin-top: 8px;
      cursor: pointer;
      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 10px;
      }
    }
    .input {
      border: none;
      outline: none;
      input {
        border: none;
      }
    }
  }
}
/deep/.el-input__inner {
  border-color: #c0c4cc !important;
}
</style>
